<template>
  <div class="Me">
    <section>
      <header></header>
      <main>
        <dl>
          <dt class="Me_portrait"></dt>
          <dd>点击切换头像</dd>
        </dl>
        <section class="Me_font_awesome">
          <dl>
            <dt><i class="fa fa-heart fa-2x" aria-hidden="true"></i></dt>
            <dd>我的收藏</dd>
          </dl>
          <dl>
            <dt><i class="fa fa-thumbs-up fa-2x" aria-hidden="true"></i></dt>
            <dd>我的点赞</dd>
          </dl>  
          <dl>
            <dt><i class="fa fa-bell fa-2x" aria-hidden="true"></i></dt>
            <dd>  消息  </dd>
          </dl>
        </section>
        <section class="Me_down_part">
          <aside class="Me_list">
            <p>
              <b>账号管理</b>
              <i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>
            </p>
            <p>
              <b>系统设置</b>
              <i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>
            </p>
            <p>
              <b>分享应用给朋友</b>
              <i class="fa fa-angle-right fa-2x" aria-hidden="true"></i>
            </p>
          </aside>  
        </section>
      </main>
      <footer></footer>
    </section>
  </div>
</template>
<script>
  export default {
    name: 'Me',
    data() {
      return {
        font_awesome: [
        ],
      }
    }
  }
</script>
<style lang="less" scoped>
  .px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
  }
  .flexbox{
    display: flex;
  }
  .height(@ht){.px2rem(height,@ht)}
  .line-height(@arg){.px2rem(line-height, @arg);}
  .font-size(@arg){.px2rem(font-size, @arg);}
  .font(@fz,@color){
      .px2rem(font-size,@fz);
      color: @color;
  }
  .border-radius(@arg){.px2rem(border-radius, @arg);}
  .padding-top(@top){.px2rem(padding-top, @top);}
  .padding-right(@right){.px2rem(padding-right, @right);}
  .padding-bottom(@bottom){.px2rem(padding-bottom, @bottom);}
  .padding-left(@left){.px2rem(padding-left, @left);}
  .margin-top(@top){.px2rem(margin-top, @top);}
  .margin-right(@right){.px2rem(margin-right, @right);}
  .margin-bottom(@bottom){.px2rem(margin-bottom, @bottom);}
  .margin-left(@left){.px2rem(margin-left, @left);}
  html,body{
    width:100%;
    height:100%;
  }
  main{
    .height(482);
    .font(21,#000);
    font-weight: 900;
    dl{
      .padding-top(144);
      margin:0 auto;
      .Me_portrait{
        .height(90);
        .px2rem(border-radius, 90);
        .px2rem(width, 90);
        background:#c0c0c0;
        .px2rem(line-height, 90);
        margin:0 auto;
      }
      dd{
        text-align:center;
      }
    } 
    .Me_font_awesome{
      .margin-top(106);
      .margin-bottom(106);
      display:flex;
      justify-content:space-around;
      dl{
        text-align:center;
        dt{
          margin:0 auto;
        }
      }
    }
    .Me_down_part{
      padding: 0 2%;
      .padding-top(14);
      border-top: 20px solid #f0f0f0;
      .Me_list{
        p{
          border-bottom:2px solid #dddddd;
          .line-height(64);
          display:flex;
          justify-content:space-between;
          .px2rem(font-size, 21);
          b{
            .margin-left(5);
          }
          i{
            .margin-top(5);
            color:#c2c2c2;
          }
        }
      }
    } 
  }  
</style>